// variable for time outerHeight
var t=0;
$(document).ready(function(){
	$("#slideContainer :first-child").addClass("active");
	$("#carousel").append("<div class='navigation'><button class='back' onClick='showBack() '><i  style='zoom:2' class='icon-circle-arrow-left'></i></button><button class='next' onClick='showNext()' ><i style='zoom:2' class='icon-circle-arrow-right'></i></button></div>");
	startSlideShow();
});

//Start slide Show
function startSlideShow() {
   // setTimeout(function(){showNext()}, 3000);
	t=setTimeout(function(){startSlideShow()}, 5000);
	showNext();
}

function getActiveDiv(slides){
	//get the position of active slideShow
	var active=0;
	$(slides).each(function(i,v){
		if($(this).hasClass("active")) active=i;
	});
	return active;
}

function pause(th){
	clearTimeout(t);
	$(th).replaceWith("<button class='pause' onClick='play(this)' ><i style='zoom:2' class=' icon-play'></i></button>");
}

function play(th){
	startSlideShow();
	$(th).replaceWith("<button class='pause' onClick='pause(this)' ><i style='zoom:2' class=' icon-pause'></i></button>");
}
//show next
function showNext(){
	t=0;
	var slides=$("#carousel").find(".slider");
	var active=getActiveDiv(slides);
	var count=slides.length;
	$(slides).each(function(i,v){
		if(i==active){
			//$(v).fadeOut("slow");
			$(v).removeClass("active");
			$(v).addClass("inactive");
			if(i==count-1){
				$(slides[0]).removeClass("inactive");
				$(slides[0]).addClass("active");
			}else{
				$(slides[i+1]).removeClass("inactive");
				$(slides[i+1]).addClass("active");
			}
		}
	});
}

//show previous
function showBack(){
	var slides=$("#carousel").find(".slider");
	var active=getActiveDiv(slides);
	var count=slides.length;
	$(slides).each(function(i,v){
		if(i==active){
			$(v).removeClass("active");
			$(v).addClass("inactive");
			if(i==0){
				$(slides[count-1]).removeClass("inactive");
				$(slides[count-1]).addClass("active");
			}else{
				$(slides[i-1]).removeClass("inactive");
				$(slides[i-1]).addClass("active");
			}
		}
	});
}

